<template>
	<view>
		<form @submit="submitSub" report-submit='true'>
			<view class="payment-top acea-row row-column row-center-wrapper">
				<span class="name">{{$t('users.payment.money')}}</span>
				<view class="pic">
					$<span class="pic-font">{{ merchaninfo.mer_money || 0 }}</span>
				</view>
			</view>
			<view class="payment">
				
				<view class='tip picList'>
					<view class='input' style="width: 100%;"><text>$</text><input placeholder="0.00" type='number' placeholder-class='placeholder' :value="number"
						 name="number"></input></view>
					<view class="tips-box" v-if="usdt"  style="width: 100%;">
						<view class="tips mt-30" style="width: 100%;">{{$t('users.payment.mainNet')}}：{{rechargeTypeData.usdt_main}}</view>
						<view class="tips mt-30" style="width: 100%;">{{$t('users.payment.moneyAddr')}}：{{rechargeTypeData.usdt_addr}}</view>
						<view class="tips mt-30" style="width: 100%;">{{$t('users.payment.ewm')}}USDT：
						<view class="tips mt-30" style="width: 100%;text-align: center;">
						<image :src="rechargeTypeData.usdt_picture"  style="width: 320px;height: 320px;"></image>
						</view>
						</view>
						<view class="tips mt-30" style="width: 100%;text-align: center;">
						<text class="cope" @click="copyTBL()">{{$t('users.payment.copy')}}</text>
						</view>
					</view>
					<view class="tips-box" v-if="usdt2"  style="width: 100%;">
						<view class="tips mt-30" style="width: 100%;">{{$t('users.payment.mainNet')}}：{{rechargeTypeData.usdt_main2}}</view>
						<view class="tips mt-30" style="width: 100%;">{{$t('users.payment.moneyAddr')}}：{{rechargeTypeData.usdt_addr2}}</view>
						<view class="tips mt-30" style="width: 100%;">{{$t('users.payment.ewm')}}USDT：
						<view class="tips mt-30" style="width: 100%;text-align: center;">
						<image :src="rechargeTypeData.usdt_picture2"  style="width: 320px;height: 320px;"></image>
						</view>
						</view>
						<view class="tips mt-30" style="width: 100%;text-align: center;">
						<text class="cope" @click="copyTBL2()">{{$t('users.payment.copy')}}</text>
						</view>
					</view>
					<view class="tips-box" v-if="bank">
						<!-- <view class="tips mt-30">{{$t('Please.contact')}}</view> -->
						<view class="tips mt-30">{{$t('users.payment.bankNumber')}}：{{rechargeTypeData.bank_number}}</view>
						<view class="tips mt-30">{{$t('users.payment.bangName')}}：{{rechargeTypeData.bank_bankName}}</view>
						<view class="tips mt-30">{{$t('users.payment.userName')}}：{{rechargeTypeData.bank_name}}</view>
					</view>
					<view class="item">
						<radio-group name="receipt_title_type" @change="changeHeader">
							<view class="acea-row row-middle">
							<label style="width: 100%;">
								<text>USDT-TRC20{{$t('users.payment.rechargeComm')}}</text><radio value="1" :checked="usdt" style="float: right;"/>
							</label>
							</view>
							<view class="acea-row row-middle">
							<label style="width: 100%;margin-top: 18rpx;">
								<text>USDT-ERC20{{$t('users.money.recharge')}}</text><radio value="3" :checked="usdt2" style="float: right;"/>
							</label>
							</view>
							<!-- <view class="acea-row row-middle">
							<label style="width: 100%;margin-top: 18rpx;">
								<text>{{$t('users.payment.rechargeNumber')}}</text><radio value="2" :checked="bank" style="float: right;" />
							</label>
							</view>
							<view class="acea-row row-middle">
							<label style="width: 100%;margin-top: 18rpx;">
								<text>{{$t('Rechargezx')}}</text><radio value="4" :checked="online" style="float: right;" />
							</label>
							</view>
							<view class="acea-row row-middle">
							<label style="width: 100%;margin-top: 18rpx;">
								<text>{{$t('Rechargerg')}}</text><radio value="5" :checked="service" style="float: right;" />
							</label>
							</view> -->
						</radio-group>
					</view>
					<view class="item"  v-if="!online && !service">
						<view class='acea-row row-middle'>
							<text class="item-title">{{$t('users.payment.loadImg')}}</text>
					
						</view>
						<view class="upload">
							<view class='pictrue' @click="getPhotoClickIdx">
								<image :src='pics' v-if="pics"></image>
							</view>
							<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic'>
								<text class='iconfont icon-icon25201'></text>
								<view>{{$t('users.payment.loadPic')}}</view>
							</view>
						</view>
					</view>
					
					<view class="tips-box">
						<view class="tips mt-30">{{$t('users.payment.rechargeNote')}}：</view>
						<view class="tips-samll" v-for="(item,index) in rechargeAttention" :key="index">
							{{ item }}
						</view>
					</view>

				</view>
				
				<button class='but bg-color' formType="submit"> {{$t('users.payment.payTo')}}</button>
			</view>
		</form>
		<!-- #ifdef MP -->
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
		<!-- #endif -->
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企業发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB並不是自由软件，未经许可不能去掉CRMEB相關版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import {
		merchanInfo,
		rechargeRoutine,
		rechargeWechat2,
		getRechargeApi,
		rechargeBrokerage
	} from '@/api/user.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	let bok = true
	export default {
		components: {
			// #ifdef MP
			authorize
			// #endif
		},
		data() {
			let that = this;
			return {
				isLogin:false,
				mer_id: '',
				mer_money: 0,
				navRecharge: [this.$t('users.payment.accountRecharge'), this.$t('users.payment.moneyPayTo')],
				active: 0,
				recharType: 1,
				usdt:true,
				usdt2:false,
				bank:false,
				online: false,
				service: false,
				kefu_url: '',
				number: '',
				rechargeTypeData:[],
				merchaninfo: {},
				placeholder: "0.00",
				from: '',
				isAuto: false, //没有授权的不會自动授权
				isShowAuth: false, //是否隐藏授权
				picList: [],
				pics:'',
				activePic: 0,
				money: "",
				numberPic: '',
				rechar_id: 0,
				rechargeAttention: []
			};
		},
		// computed: mapGetters(['isLogin']),
		onLoad(options) {
			this.mer_id = options.mer_id
			// #ifdef H5
			this.from = this.$wechat.isWeixin() ? "weixin" : "h5"
			// #endif
			this.isLogin = this.$store.getters.isLogin()
			if (this.isLogin) {
				this.getUserInfo();
				this.getRecharge();
			} else {
				// #ifdef H5 || APP-PLUS
				toLogin();
				// #endif 
				// #ifdef MP
				this.isAuto = true;
				this.$set(this, 'isShowAuth', true)
				// #endif
			}
			uni.getStorage({
				key: 'GLOBAL_DATA',
				success: res => {
					this.kefu_url = res.data.sys_phone;
				}
			});
		},
		methods: {
			// 获得相册 idx
			getPhotoClickIdx(e) {
				let _this = this;
				let idx = e.currentTarget.dataset.index;
				_this.imgPreview(_this.pics, idx);
			},
			// 圖片預覽
			imgPreview: function(list, idx) {
				// list：圖片 url 数组
				if (list && list.length > 0) {
					uni.previewImage({
						current: list[idx], //  傳 Number H5端出现不兼容 
						urls: list
					});
				}
			},
			copyTBL(url) {
				let copeData = this.rechargeTypeData.usdt_addr;
				// #ifdef MP || APP-PLUS
				uni.setClipboardData({
					data: copeData,
					success: function() {
						uni.showToast({
							title: this.$t('Copy.succeeded'),
							duration: 1000
						});
					}
				});
				// #endif
				// #ifdef H5
				this.copyText(copeData)
				// #endif
			},
			copyTBL2(url) {
				let copeData = this.rechargeTypeData.usdt_addr2;
				// #ifdef MP || APP-PLUS
				uni.setClipboardData({
					data: copeData,
					success: function() {
						uni.showToast({
							title: this.$t('users.payment.copy'),
							duration: 1000
						});
					}
				});
				// #endif
				// #ifdef H5
				this.copyText(copeData)
				// #endif
			},
			//H5复制方法
			webCopy(e) {
				let transfer = document.createElement('input');
				document.body.appendChild(transfer);
				transfer.value = e; // 这里表示想要复制的内容
				transfer.focus();
				transfer.select();
				if (document.execCommand('copy')) {
					document.execCommand('copy');
				}
				transfer.blur();
				this.$util.Tips({
					title: this.$t('users.payment.copy')
				});
				transfer.style.display = 'none'
				document.body.removeChild(transfer);
			},
			// 兼容版一键复制
			copyText(text) {
				// 需要转化成字符串
				const textString = text.toString();
				let input = document.querySelector('#copy-input');
				if (!input) {
					input = document.createElement('input');
					input.id = "copy-input";
					input.readOnly = "readOnly"; // 防止ios聚焦触发键盘事件
					input.style.position = "absolute";
					input.style.left = "-1000px";
					input.style.zIndex = "-1000";
					document.body.appendChild(input)
				}
				input.value = textString;
				// ios必须先选中文字且不支持 input.select();
				selectText(input, 0, textString.length);
				if (document.execCommand('copy')) {
					document.execCommand('copy');
					this.$util.Tips({
						title: this.$t('users.payment.copy')
					});
				}
				input.blur();
			
				// input自带的select()方法在苹果端無法进行选择
				// 选择文本。createTextRange(setSelectionRange)是input方法
				function selectText(textbox, startIndex, stopIndex) {
					if (textbox.createTextRange) { //ie
						const range = textbox.createTextRange();
						range.collapse(true);
						range.moveStart('character', startIndex); //起始光标
						range.moveEnd('character', stopIndex - startIndex); //结束光标
						range.select(); //不兼容苹果
					} else { //firefox/chrome
						textbox.setSelectionRange(startIndex, stopIndex);
						textbox.focus();
					}
				}
			},
			/**
			* 上傳文件
			 * 
			*/
			uploadpic: function() {
				let that = this;
					that.$util.uploadImageOne('upload/image', function(res) {
						
						that.pics=res.data.path;
						console.log(res.data);
						//that.$set(that, 'pics', that.pics);
					});
			    //console.log(that.pics);
			},
			changeHeader(e) {
				console.log(e);
				if (e.detail.value == 1) {
					this.recharType=1;
					this.usdt = true;
					this.usdt2 = false;
					this.bank = false;
					this.online = false;
					this.service = false;
				}else if (e.detail.value == 2) {
					this.recharType=2;
					this.usdt = false;
					this.usdt2 = false;
					this.bank = true;
					this.online = false;
					this.service = false;
				}else if (e.detail.value == 3) {
					this.recharType=3;
					this.usdt = false;
					this.usdt2 = true;
					this.bank = false;
					this.online = false;
					this.service = false;
				}else if (e.detail.value == 4) {
					this.recharType=4;
					this.usdt = false;
					this.usdt2 = false;
					this.bank = false;
					this.online = true;
					this.service = false;
				}else if (e.detail.value == 5) {
					this.recharType=4;
					this.usdt = false;
					this.usdt2 = false;
					this.bank = false;
					this.online = false;
					this.service = true;
				}
			},
			/**
			 * 选择金額
			 */
			picCharge(idx, item) {
				this.activePic = idx;
				if (item === undefined) {
					this.rechar_id = 0;
					this.numberPic = "";
				} else {
					this.money = "";
					this.rechar_id = item.id;
					this.numberPic = item.data.price;
				}
			},

			/**
			 * 充值額度选择
			 */
			getRecharge() {
				getRechargeApi()
					.then(res => {
						this.picList = res.data.recharge_quota;
						if (this.picList[0]) {
							this.rechar_id = this.picList[0].id;
							this.numberPic = this.picList[0].data.price;
						}
						this.rechargeTypeData = res.data.bank || [];
						this.rechargeAttention = res.data.recharge_attention || [];
					})
					.catch(res => {
						this.$dialog.toast({
							mes: res
						});
					});
			},


			onLoadFun: function() {
				this.isShowAuth = false;
				this.getUserInfo();
				this.getRecharge();
			},
			// 授权關闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			navRecharges: function(index) {
				this.active = index;
			},
			/**
			 * 获取用户資訊
			 */
			getUserInfo: function() {
				let that = this;
				merchanInfo({
					mer_id: that.mer_id
				}).then(res => {
					that.$set(that, 'merchaninfo', res.data);
				})
			},
			/*
			 * 用户充值
			 */
			submitSub: function(e) {
				let that = this
				let value = e.detail.value.number;
				if(this.service){
					location.href=this.kefu_url;
					return;
				}
				uni.showLoading({
					title: this.$t('users.payment.submit'),
					mask:true
				})
				that.money=value;
				//if (this.rechar_id == 0) {
				if (parseFloat(that.money)=== 0) {
					return that.$util.Tips({
						title: this.$t('users.payment.emptyMoney')
					});
				}
				if (that.pics=='' && !that.online) {
					return that.$util.Tips({
						title: this.$t('users.payment.loadPay')
					});
				}
				if (!that.money) {
					return that.$util.Tips({
						title: this.$t('users.payment.okMoney')
					});
				}
				if (!Number(that.money)) {
					return that.$util.Tips({
						title: this.$t('users.payment.okMoney')
					});
				}
				//}
				if(!bok) return false;
				bok = false
				// #ifdef MP 
				// let money = parseFloat(this.money);		
				rechargeWechat2({
					recharge_money: that.money,
					recharge_pic: that.pics,
					recharge_type:that.recharType,
					type: 'routine',
					mer_id: that.mer_id,
					recharge_id: 0
				}).then(res => {
					uni.hideLoading();
					let jsConfig = res.data.config;
					
					uni.requestPayment({
						timeStamp: jsConfig.timestamp,
						nonceStr: jsConfig.nonceStr,
						package: jsConfig.package,
						signType: jsConfig.signType,
						paySign: jsConfig.paySign,
						success: function(res) {
							that.$set(that, 'merchaninfo.mer_money', that.$util.$h.Add(value, that.merchaninfo.mer_money));
							return that.$util.Tips({
								title: this.$t('users.payment.paySucc'),
								icon: 'success'
							});
						},
						fail: function() {
							return that.$util.Tips({
								title: this.$t('users.payment.payFail')
							});
						},
						complete: function(res) {
							if (res.errMsg == 'requestPayment:cancel') return that.$util.Tips({
								title: this.$t('users.payment.payCancel')
							});
						}
					})
					
					
				}).catch(err => {
					uni.hideLoading();
					return that.$util.Tips({
						title: err
					})
				});
				// #endif
				

				// #ifdef H5 
				rechargeWechat2({
					recharge_money: that.money,
					recharge_pic: that.pics,
					recharge_type:that.recharType,
					type: that.from,
					mer_id: that.mer_id,
					recharge_id:0
				}).then(res => {
					uni.hideLoading();
						if(res.data.type== 'h5'){
							
							
							that.money = '';
							that.pics = '';
							uni.showModal({
								title:"提示",
								content:"提交成功，等待审核",
								showCancel:false,
								success: () => {
									uni.navigateBack()
									let timer = setTimeout(()=>{
										bok = true
										clearTimeout(timer)
									},3000)
								}
							})		
							
						}else if(res.data.type== 'online'){
							let url = res.data.url;
							setTimeout(() => {
								location.href = url;
							}, 100);
						}else{
							const jsConfig = res.data.config;
							jsConfig.timeStamp = jsConfig.timestamp;
							that.$wechat.pay(jsConfig).then(res => {	
								that.$set(that, 'merchaninfo.mer_money', that.$util.$h.Add(value, that.merchaninfo.mer_money));
								return that.$util.Tips({
									title: this.$t('users.payment.paySucc'),
									icon: 'success'
								});
							}).catch(res => {
								if (res.errMsg == 'chooseWXPay:cancel') return that.$util.Tips({
									title: this.$t('users.payment.payCancel')
								});
							})
						}
				}).catch(error=>{
					uni.hideLoading();
					return that.$util.Tips({
						title: error
					});
				})
				// #endif
				
				// #ifdef APP-PLUS
				rechargeWechat2({
					recharge_money: that.money ,
					recharge_pic: that.pics,
					recharge_type:that.recharType,
					recharge_id: 0,
					mer_id: that.mer_id,
					type: 'weixin'
				}).then(res => {
					uni.hideLoading();
					that.money = '';
					that.pics = '';
					uni.showModal({
						title:"提示",
						content:"提交成功，等待审核",
						showCancel:false,
						success: () => {
							uni.navigateBack()
							let timer = setTimeout(()=>{
								bok = true
								clearTimeout(timer)
							},3000)
						}
					})		
					return
					uni.requestPayment({
						orderInfo: {
							...res.data.config,
							timeStamp: res.data.config.timestamp,
						},
						provider: 'wxpay',
						success(res) {
							console.log(res);
							return that.$util.Tips({
								title: this.$t('users.payment.paySucc'),
								icon: 'success'
							});
						},
						fail: function(rej) {
							console.log(rej);
							return that.$util.Tips({
								title: this.$t('users.payment.payFail')
							});
						},
						complete: function(res) {
							if (res.errMsg == 'requestPayment:cancel') return that.$util.Tips({
								title: this.$t('users.payment.payCancel')
							});
						}
					})
				}).catch((err)=>{
					console.log(err)
					uni.hideLoading();
					let timer = setTimeout(()=>{
						bok = true
						clearTimeout(timer)
					},3000)
					return that.$util.Tips({
						title: err
					});
				})
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 120rpx;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
	.payment {
		position: relative;
		top: -60rpx;
		width: 100%;
		background-color: #fff;
		border-radius: 10rpx;
		padding-top: 25rpx;
		border-top-right-radius: 39rpx;
		border-top-left-radius: 39rpx;
	}
	.acea-row,
	.upload {
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-lines: multiple;
		-moz-box-lines: multiple;
		-o-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.upload {
		margin-top: 20rpx;
	}
	.picList .list {
		background-color: #fff;
		border-radius: 12px;
		padding: 22px 0;
		margin: 0 15px;
		position: absolute;
		top: 0rpx;
		// margin-top: -160px;
		width: calc(100% - 30px);
	}
	.picList .item {
		width: 100%;
		padding: 40rpx 0 0rpx;
		position: relative;
		

		&.no-border {
			border-bottom: none;
			padding-left: 0;
			padding-right: 0;
		}

		.item-title {
			color: #666666;
			font-size: 28rpx;
			display: block;
		}

		.item-desc {
			color: #B2B2B2;
			font-size: 22rpx;
			display: block;
			margin-top: 9rpx;
			line-height: 36rpx;
		}
	}
	.acea-row.row-middle {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding-left: 2px;
	}

	.acea-row.row-column {
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-o-box-orient: vertical;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.acea-row.row-center-wrapper {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-o-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
	}
	.payment .nav {
		height: 75rpx;
		line-height: 75rpx;
		padding: 0 100rpx;
	}

	.payment .nav .item {
		font-size: 30rpx;
		color: #333;
	}

	.payment .nav .item.on {
		font-weight: bold;
		border-bottom: 4rpx solid #e83323;
	}

	.payment .input {
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px dashed #dddddd;
		margin: 60rpx auto 0 auto;
		padding-bottom: 20rpx;
		font-size: 56rpx;
		color: #333333;
		flex-wrap: nowrap;

	}

	.payment .input text {
		padding-left: 106rpx;
	}

	.payment .input input {
		padding-right: 106rpx;
		width: 300rpx;
		height: 94rpx;
		text-align: center;
		font-size: 70rpx;
	}

	.payment .placeholder {
		color: #d0d0d0;
		height: 100%;
		line-height: 94rpx;
	}

	.payment .tip {
		font-size: 26rpx;
		color: #888888;
		padding: 0 30rpx;
		margin-top: 25rpx;
	}

	.payment .but {
		color: #fff;
		font-size: 30rpx;
		width: 700rpx;
		height: 86rpx;
		border-radius: 50rpx;
		margin: 46rpx auto 0 auto;
		line-height: 86rpx;
	}

	.payment-top {
		width: 100%;
		height: 350rpx;
		background-color: #80D1C8;

		.name {
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.8);
			margin-top: -38rpx;
			margin-bottom: 30rpx;
		}

		.pic {
			font-size: 32rpx;
			color: #fff;
		}

		.pic-font {
			font-size: 78rpx;
			color: #fff;
		}
	}

	.picList {
		display: flex;
		flex-wrap: wrap;
		margin: 30rpx 0;

		.pic-box {
			width: 32%;
			height: auto;
			border-radius: 20rpx;
			margin-top: 21rpx;
			padding: 20rpx 0;
			margin-right: 12rpx;

			&:nth-child(3n) {
				margin-right: 0;
			}
		}

		.pic-box-color {
			background-color: #f4f4f4;
			color: #656565;
		}

		.pic-number {
			font-size: 22rpx;
		}

		.pic-number-pic {
			font-size: 38rpx;
			margin-right: 10rpx;
			text-align: center;
		}

		.pic-box-color-active {
			background-color: #ec3323 !important;
			color: #fff !important;
		}
	}

	.tips-box {
		.tips {
			font-size: 28rpx;
			color: #333333;
			font-weight: 800;
			margin-bottom: 14rpx;
			margin-top: 20rpx;
		}

		.tips-samll {
			font-size: 24rpx;
			color: #333333;
			margin-bottom: 14rpx;
		}

		.tip-box {
			margin-top: 30rpx;
		}
		.cope{
			width: 150px;
			height: 50px;
			background: #80D1C8;
			padding: 6px 44px;
			border-radius: 10px;
			color: white;
		}
	}

	.tips-title {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #333;
	}
</style>
